<template>
  <div class="customer-table-box">
    <PlainCreateBtn v-if="hasRouteAuth('crm:customer:edit')" :class="{'mobile-contact-btn': showMobilePage}" class="add-btn" @click="handleAddPayer">新建付款人</PlainCreateBtn>
    <el-table
      v-if="payerData.length > 0"
      ref="customerTableRef"
      :data="payerData"
      beautify-table
      header-drag-style
      use-virtual
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="付款人名称" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.name" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="付款账号" width="150">
        <template slot-scope="scope">
          <SecretText
            :log-text="`销售客户中付款人名称${scope.row.name}的付款账号`"
            :origin-text="scope.row.account" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="协议附件" width="120">
        <template slot-scope="scope">
          <uploadFile
            v-model="scope.row.attachment"
            :tool-tip="scope.row._toolTip"
            :is-required="scope.row._required"
            :is-edit="false"
          />
        </template>
      </el-table-column>
      <el-table-column align="left" label="有效期" width="160">
        <template slot-scope="scope">
          <ToolTip :content="standardFormat(scope.row.validTime / 1000, 'YYYY/MM/DD HH:mm:ss')" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            :disabled="!hasRouteAuth('crm:customer:changePayerStatus')"
            active-color="#406EFF"
            inactive-color="#cccccc"
            @change="switchStatus(scope.row, $event)"
          />
        </template>
      </el-table-column>
      <el-table-column align="left" label="协作人">
        <template slot-scope="scope">
          <ToolTip :content="formatName(scope.row.associate, 'userName')" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="协作部门">
        <template slot-scope="scope">
          <ToolTip :content="formatName(scope.row.coDepartment, 'name')" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建人">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.creator" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间" width="160">
        <template slot-scope="scope">
          <ToolTip :content="standardFormat(scope.row.createDate / 1000, 'YYYY/MM/DD HH:mm:ss')" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="备注">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.remark" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="状态变更人" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.statusChanger" />
        </template>
      </el-table-column>
      <el-table-column v-if="hasRouteAuth('crm:customer:edit') || hasRouteAuth('crm:customer:deletePayer')" fixed="right" align="left" label="操作" width="100">
        <template slot-scope="scope">
          <div v-if="!showMobilePage" style="display:flex;">
            <div v-if="hasRouteAuth('crm:customer:edit')" class="button-text mr10" @click="handleEdit(scope.row)">编辑</div>
            <div v-if="hasRouteAuth('crm:customer:deletePayer')" class="button-text" @click="handleDel(scope.row)">删除</div>
          </div>
          <tableOperateBtn v-else>
            <el-dropdown-item v-if="hasRouteAuth('crm:customer:edit')" style="width:90px;text-align: center" @click.native="handleEdit(scope.row)">
              <div>编辑</div>
            </el-dropdown-item>
            <el-dropdown-item v-if="hasRouteAuth('crm:customer:deletePayer')" style="width:90px;text-align: center" @click.native="handleDel(scope.row)">
              <div>删除</div>
            </el-dropdown-item>
          </tableOperateBtn>
        </template>
      </el-table-column>
    </el-table>
    <EmptyPlaceholder v-else :empty-img-top="'0px'" />
    <el-row type="flex" justify="end">
      <el-pagination
        v-show="payerDataCount > 0"
        :current-page="payerParams.page"
        :page-size="payerParams.perPage"
        :total="payerDataCount"
        :page-sizes="[10, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    <AddPayerDialog ref="AddPayerDialog" :customer-id="customerId" @updateDetail="updateDetail"/>
  </div>
</template>

<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import uploadFile from '@/components/Common/uploadFile';
import AddPayerDialog from './addPayerDialog';
import { getClientPayers, deletePayer, editClientPayer } from '@/api/customer';
import { standardFormat } from '@/filters/date';
import ElMessage, { showModal } from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import { formatName } from '@/utils/tools';
import { mapState } from 'vuex';
import mobileTable from '@/mixins/mobileTable';

export default {
  name: 'ContactTable',
  components: { EmptyPlaceholder, uploadFile, AddPayerDialog },
  mixins: [mobileTable],
  props: {
    customerId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      contactLoading: false,
      payerData: [], // 联系人列表数据
      payerDataCount: 0,
      payerParams: {
        page: 1,
        perPage: 10
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.getPayerList();
  },
  methods: {
    hasRouteAuth,
    standardFormat,
    formatName,
    getPayerList() {
      this.payerLoading = true;
      getClientPayers(this.customerId, this.payerParams).then(res => {
        this.payerData = res.data.items;
        this.payerDataCount = res.data.total;
        this.payerLoading = false;
      }).catch(err => {
        console.log(err);
        this.payerLoading = false;
      });
    },
    handleAddPayer() {
      this.$refs.AddPayerDialog.openDialog();
    },
    handleSizeChange(val) {
      this.payerParams.perPage = val;
      this.getPayerList();
    },
    handleCurrentChange(val) {
      this.payerParams.page = val;
      this.getPayerList();
    },
    switchStatus(row, status) {
      const tip = `<p>请确认是否${status ? '启用' : '禁用'}该付款人</p><p>${status ? '启用' : '禁用'}后该客户${status ? '' : '不'}可核销该付款人的流水</p>`;
      showModal(tip, '', {}, true).then(_ => {
        editClientPayer(row.id, status).then(res => {
          if (res.code === 200) {
            ElMessage.success('操作成功');
            this.getPayerList();
            this.$emit('updateLog');
          }
        }).catch(_ => {
          row.status = status ? 0 : 1;
        });
      }).catch(_ => {
        row.status = status ? 0 : 1;
      });
    },
    handleEdit(row) {
      this.$refs.AddPayerDialog.openDialog(row);
    },
    handleDel(row) {
      showModal(`请确认是否删除该付款人？`, '', {}, true).then(_ => {
        deletePayer(row.id).then(res => {
          if (res.code === 200) {
            ElMessage.success('操作成功');
            this.getPayerList();
            this.$emit('updateLog');
          }
        }).catch();
      }).catch(_ => {});
    },
    updateDetail() {
      this.getPayerList(true);
      this.$emit('updateLog');
    }
  }
};
</script>
<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
}
.add-btn {
  border-radius: 4px;
}
</style>
